<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>生产过程查询</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    <!--搜索框-->
    <div style="width:100%;height:100px;padding: 20px;
            background-image: url('/images/f.jpg');background-repeat: no-repeat;background-size: 100% 100%">
        <div style="width: 400px">
            <el-form label-width="130px">
                <el-form-item label="输入订单编号：">
                    <el-input v-model="oid"
                              placeholder="请输订单编号"
                              clearable
                    >
                        <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="选择页面条数：">
                    <el-dropdown @command="handleCommand">
                        <el-button type="primary">
                            {{size}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="1">1</el-dropdown-item>
                            <el-dropdown-item command="2">2</el-dropdown-item>
                            <el-dropdown-item command="5">5</el-dropdown-item>
                            <el-dropdown-item command="10">10</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!--分割线-->
    <div>
        <el-divider content-position="left"><span style="font-size: 25px">订单信息表格</span></el-divider>
    </div>
    <!--表格数据-->
    <div :style="'display:'+tableFlag">
        <el-table
                :data="tableData"
                style="width: 100%"
                border
                :cell-style="cellStyle"
        >
            <el-table-column prop="orderId" label="订单编号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pname" label="商品名称" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="dealTime" label="交易时间" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="orderHolder" label="操作人" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pmaterial" label="商品材料" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pbrand" label="公司" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="allStatus" label="订单状态" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :current-page="current"
                :page-size="size"
                @current-change="loadPage">
        </el-pagination>
    </div>
    <!--会话框-->
    <el-dialog title="详情" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
            <el-table-column property="time" label="日期" width="150"></el-table-column>
            <el-table-column property="operator" label="操作人"></el-table-column>
            <el-table-column property="allStatus" label="状态" width="200"></el-table-column>
            <el-table-column property="startPlace" label="发货位置"></el-table-column>
            <el-table-column property="endPlace" label="结束位置"></el-table-column>
        </el-table>
    </el-dialog>
</div>
</body>
<script src="/vue/vue.js"></script>
<script src="/elementui/index.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/js/productquality.js"></script>
</html>